<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type=text/css>
        .no-line {
            white-space: nowrap;
        }
        
        .drop-menu {
            position: relative;
            /* 使菜单跟hover对象保持相对位置 */
            display: inline-block;
            /* 使菜单形成自然宽度而不会撑满屏幕 */
            /* 其他的关于整体的样式控制 */
        }
        
        .btn {
            color: deepskyblue;
            cursor: pointer;
            /* hover时鼠标的变化提示 */
        }
        
        .drop-content {
            display: none;
            /* 默认不显示菜单 */
            position: absolute;
            /* 跟hover对象的relative对应 */
            z-index: 1;
            /* 保证菜单在最上层，不被其他元素覆盖 */
            text-decoration: none;
        }
        
        .drop-menu:hover .drop-content {
            display: block;
            /* 悬停时变为显示 */
        }
        
        .drop-menu:hover .hover-btn {
            /* 悬停时hover对象的样式控制 */
        }
    </style>
</head>

<body class="no-line">
    <div class="drop-menu">
        <div class="btn">武器 护甲 英雄</div>
        <div class="drop-content">
            <a href="#">盖伦</a>
            <a href="#">提莫</a>
            <a href="#">安妮</a>
            <a href="#">瓜哥</a>
        </div>

</body>

</html>